<template>
  <div class="lateral-sliding">
    <div class="lateral-sliding-item" v-for="(item,index) in radiolist" :key="index" @click.stop="toplay(item.id,item.mainTrackId)">
      <div class="each-img">
          <img v-lazy="item.coverUrl" :alt="item.id">
          <div class="tex" v-text="item.name"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      items: 10,
      radiolist:[]
    }
  },
  created() {
      this.zinit();
  },
   watch: {
    $route() {
      this.zinit();
    }
  },
  methods:{
     async zinit() {
      let radiolist = localStorage.getItem("radiolist");
      if (radiolist) {
        radiolist = JSON.parse(radiolist);
        if (new Date().getTime() - radiolist.time < 30 * 60 * 1000) {
          this.radiolist = radiolist.data;
          return;
        }
      } else {
        await this.$axios({
          url: this.$URL.BASE_URL + "/dj/program/toplist/hours",
          params: {
          limit:10
      }
        })
        .then(res => {
        this.$nextTick(() => {
        this.radiolist  = pr
      })
        let pr = res.data.data.list.map(item =>{
            return item.program
          })
        localStorage.setItem(
              "radiolist",
              JSON.stringify({
                time: new Date().getTime(),
                data: pr
              })
            );
        })
        .catch(err =>{
          console.log(err)
        })
      }
    },
      toplay(id,urlid) {
      this.$router.push({
        path: "./play2",
        name: "Play2",
        params: {
          id:id,
          urlid:urlid
        }
      });
    },

  },
  mounted() {
   
  },
}
</script>
 
<style lang="scss" scoped>
.lateral-sliding {
  padding:10px 23px 23px 23px;
  display: flex;
  overflow-y: hidden;
  overflow-x: scroll;
}
.lateral-sliding-item {
  display: flex;
  margin-right: 8px;
}
.each-img {
  width: 130px;
  position: relative;
  img{
      width: 100%;
      height: 100%;
  }
  .tex{
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: rgba(37, 37, 37, 0.466);
    width: 130px;
    height: 30px;
    line-height: 30px;
    overflow:hidden; 
    white-space:nowrap; 
    text-indent: 0.4em;
    text-overflow:ellipsis;
    font-size: 13px;
    color: rgba(235, 235, 235, 0.699);
    
  
  }
}

 
</style>